<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:sg="http://java.sun.com/jsf/composite/ezcomp"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>SmartGrid</title>
        <h:outputStylesheet library="css" name="backoffice.css" />
        <h:outputStylesheet library="css" name="Form.css" />
        <h:outputStylesheet library="css" name="TopMenu.css" />
        <h:outputStylesheet library="css" name="Footer.css" />
        <h:outputStylesheet library="css" name="Chart.css" />
        <h:outputStylesheet library="css" name="tipsy.css" />
        <h:outputStylesheet library="css" name="jquery-ui-1.8.14.custom.css" />
        <h:outputStylesheet library="css" name="datepicker.css" />
        <h:outputStylesheet library="css" name="datePickerLayout.css" />
        <h:outputScript library="javascript" name="jQuery.js" />
        <h:outputScript library="javascript" name="jquery.tipsy.js" />
        <h:outputScript library="javascript" name="jQueryUi.js" />
        <h:outputScript library="javascript" name="jQueryUiWidget.js" />
        <h:outputScript library="javascript" name="jQueryUiDatePicker.js" />
        <h:outputScript library="javascript" name="datepicker.js" />
        <h:outputScript library="javascript" name="eye.js" />
        <h:outputScript library="javascript" name="layout.js" />
        <h:outputScript library="javascript" name="highcharts.js" />
        <h:outputScript library="javascript" name="Stats.js" />
        <h:outputScript library="javascript" name="json2.js" />
        <h:outputScript library="javascript" name="MyJs.js" />
    </h:head>

    <h:body >
        <sg:pageHeader >
            <ui:param name="menu" value="false" />
        </sg:pageHeader>
        <h1>BackOffice</h1>

        <h2>Gestão de contas Facebook</h2>
        <h:form id="FormFacebook">
            <div class="frameContent">
                <div class="frameleft">
                    <h3>Lista de contratos:</h3>
                    <h:selectOneListbox styleClass="ContractList" value="#{backofficeBackingBean.selectedfacebook}" title="Selecione um contrato para visualizar os respectivos marcadores">
                        <f:selectItems value="#{backofficeBackingBean.facebooksList}" />
                        <f:ajax event="change" render="annotationList" />
                    </h:selectOneListbox>
                </div>

                <h:panelGroup id="annotationList" styleClass="frameright">
                    <div class="framerightVerticalLine"></div>
                    <h3>Informação da conta:</h3> 
                    <p>
                        <b>UID do Facebook: </b> <h:outputText value="#{backofficeBackingBean.facebookUID}" />
                    </p>
                    <p>
                        <b>Nome: </b> <h:outputText value="#{backofficeBackingBean.facebookName}" />
                    </p>
                    <p> 
                        <h:commandButton action="#{backofficeBackingBean.setFacebookState}" value="#{backofficeBackingBean.facebookStateInString}" title="Clique para activar/desactivar a conta">
                        </h:commandButton>
                    </p>
                </h:panelGroup>
            </div>
        </h:form>



        <h2>Gestão de contas Facebook:</h2>
        <h:form id="mainForm">
            <div class="frameContent">
                <div class="frameleft">
                    <h3>Lista de Contas</h3>
                    <h:selectOneListbox styleClass="ContractList" value="#{backofficeBackingBean.selectedfacebook2}" title="Seleccione uma conta facebook">
                        <f:selectItems value="#{backofficeBackingBean.facebooksList}" />
                        <f:ajax event="change" render="ContractsList" />
                    </h:selectOneListbox>
                </div>

                <h:panelGroup id="ContractsList" styleClass="frameright">
                    <div class="framerightVerticalLine"></div>
                    <h3>Lista de contratos:</h3>
                    <h:selectOneListbox id="contractSelectorBackOffice" styleClass="ContractList" value="#{backofficeBackingBean.selectedContract}" title="Seleccione um contrato para o remover desta conta Facebook">
                        <f:selectItems value="#{backofficeBackingBean.contractList}" />
                    </h:selectOneListbox><br />
                    <h:commandButton action="#{backofficeBackingBean.removeContract}" value="Remover Contrato" title="Clique para activar/desactivar a conta">
                    </h:commandButton>

                </h:panelGroup>
            </div>
            <h2>Executar o ETL (ExtractTransformLoad):</h2>
            <p>O ETL, preferencialmente, deve ser executado todos os dias e sempre em alturas de menos afluência ao servidor. Clique no botão a seguir para executar o ETL: </p>
            <h:commandButton action="#{backofficeBackingBean.etl}" value="Materializar dados!" title="Clique para activar/desactivar a conta">
            </h:commandButton>
        </h:form>

        <sg:pageFooter />
    </h:body>
</html>

